var app = angular.module('myApp', []);

app.directive('accordion', function(){
	return {
		restrict: 'EA',
		replace: true,
		transclude : true,
		template: '<div ng-transclude></div>',
		controller: function(){
			var expanders = [];
			
			this.gotOpened = function(selectedExpander){
				angular.forEach(expanders, function(expander) {
                    if (selectedExpander != expander) {
                        expander.showMe = false;
                    }
                });
			};
			this.addExpander = function(expander) {
                expanders.push(expander);
            };
		}
	};
});

app.directive('expander', function() {
	return {
		'restrict': 'EA', //E:元素，<myDirect></myDirect>;A:属性，<div myDirect></div>;C:样式，<div class="myDirect"></div>;M:注释，<!-- directive: myDirect -->
		
		replace: true,//替换当前标签
		transclude: true,//保留标签内的内容，在模板中使用<span ng-transclude></span>注明原始内容保留在哪,以span标签包裹
		require: '^?accordion',
		scope: {
			subtitle : '=expanderTitl'
		},
		template: '<div><div class="title" ng-click="toggle()">{{subtitle}}</div><div class="body" ng-show="showMe" ng-transclude></div></div>', //模板
		link : function(scope, element, attrs, accordionController){
			scope.showMe = false;
			accordionController.addExpander(scope);
			scope.toggle = function toggle(){
				scope.showMe = !scope.showMe;
				accordionController.gotOpened(scope);
			};
		}
	};
});

app.controller('firstController', function($scope) {
	$scope.expanders = [{
        title : 'Click me to expand',
        text : 'Hi there folks, I am the content that was hidden but is now shown.'
    }, {
        title : 'Click this',
        text : 'I am even better text than you have seen previously'
    }, {
        title : 'Test',
        text : 'test'
    }];
});